<template>
  <transition name="fade" mode="out-in">
    <template v-if="overlay && visible">
      <view v-show="show" :class="['lxd-overlay', overlayClass]" @click.stop="changeShow"></view>
    </template>
  </transition>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';

interface Props {
  show: boolean;
  overlay?: boolean;
  overlayClass?: string;
  closeOnClickOverlay?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  show: false,
  overlay: true,
  overlayClass: '',
  closeOnClickOverlay: true
});

const emits = defineEmits(['update:show']);
const visible = ref(false);

const oneWacth = watch(
  () => props.show,
  (s) => {
    s && (visible.value = true);

    oneWacth();
  }
);

const changeShow = () => {
  props.closeOnClickOverlay && emits('update:show', false);
};
</script>
<style lang="scss">
.lxd-overlay {
  position: fixed;
  z-index: 1997;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
